<template>
  <div class="profile-container">
    <h2>个人中心</h2>
    
    <!-- 企业用户信息 -->
    <template v-if="userType === 'company'">
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span>企业信息</span>
            <el-button type="primary" size="small" @click="editCompanyInfo">
              {{ isEditingCompany ? '保存' : '编辑' }}
            </el-button>
          </div>
        </template>
        
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="6" animated />
        </div>
        
        <div v-else-if="companyInfo" class="company-info">
          <el-form ref="companyFormRef" :model="companyInfo" :disabled="!isEditingCompany" label-width="120px">
            <el-form-item label="公司名称" prop="companyName">
              <el-input v-model="companyInfo.companyName" />
            </el-form-item>
            
            <el-form-item label="公司地址" prop="companyAddress">
              <el-input v-model="companyInfo.companyAddress" />
            </el-form-item>
            
            <el-form-item label="公司类型" prop="companyType">
              <el-select v-model="companyInfo.companyType" placeholder="请选择公司类型" style="width: 100%">
                <el-option label="有限责任公司" value="有限责任公司" />
                <el-option label="股份有限公司" value="股份有限公司" />
                <el-option label="个人独资企业" value="个人独资企业" />
                <el-option label="合伙企业" value="合伙企业" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="法人姓名" prop="legalName">
              <el-input v-model="companyInfo.legalName" />
            </el-form-item>
            
            <el-form-item label="法人联系方式" prop="legalPhone">
              <el-input v-model="companyInfo.legalPhone" />
            </el-form-item>
            
            <el-form-item label="法人身份证号" prop="legalIdCard">
              <el-input v-model="companyInfo.legalIdCard" />
            </el-form-item>
            
            <el-form-item label="银行账户" prop="bankAccount">
              <el-input v-model="companyInfo.bankAccount" />
            </el-form-item>
          </el-form>
        </div>
        
        <el-empty v-else description="暂无企业信息" />
      </el-card>
    </template>
    
    <!-- 零工用户信息 -->
    <template v-else-if="userType === 'worker'">
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span>个人信息</span>
            <el-button type="primary" size="small" @click="editWorkerInfo">
              {{ isEditingWorker ? '保存' : '编辑' }}
            </el-button>
          </div>
        </template>
        
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="4" animated />
        </div>
        
        <div v-else-if="workerInfo" class="worker-info">
          <el-form ref="workerFormRef" :model="workerInfo" :disabled="!isEditingWorker" label-width="120px">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="workerInfo.name" />
            </el-form-item>
            
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="workerInfo.phone" />
            </el-form-item>
            
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="workerInfo.idCard" />
            </el-form-item>
            
            <el-form-item label="银行账户" prop="bankAccount">
              <el-input v-model="workerInfo.bankAccount" />
            </el-form-item>
            
            <el-form-item label="擅长工种" prop="skillType">
              <el-select v-model="workerInfo.skillType" placeholder="请选择擅长工种" style="width: 100%">
                <el-option label="普工" value="普工" />
                <el-option label="装卸工" value="装卸工" />
                <el-option label="搬运工" value="搬运工" />
                <el-option label="仓管员" value="仓管员" />
                <el-option label="快递员" value="快递员" />
                <el-option label="服务员" value="服务员" />
                <el-option label="销售员" value="销售员" />
                <el-option label="保洁" value="保洁" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        
        <el-empty v-else description="暂无个人信息" />
      </el-card>
    </template>
    
    <!-- 账户信息 -->
    <el-card class="account-card">
      <template #header>
        <div class="card-header">
          <span>账户信息</span>
        </div>
      </template>
      <div class="account-info">
        <p><strong>用户名：</strong> {{ username }}</p>
        <p><strong>用户类型：</strong> {{ userType === 'company' ? '企业用户' : '零工用户' }}</p>
        <p><strong>注册时间：</strong> {{ registerTime }}</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getCompanyInfo, updateCompanyInfo } from '@/api/company'
import { getWorkerInfo, updateWorkerInfo } from '@/api/worker'

const username = ref(localStorage.getItem('username') || '用户')
const userType = ref(localStorage.getItem('userType') || 'worker')
const loading = ref(false)
const companyInfo = ref(null)
const workerInfo = ref(null)
const isEditingCompany = ref(false)
const isEditingWorker = ref(false)
const registerTime = ref('2023-10-01 12:00:00') // 暂时使用一个固定值

const companyFormRef = ref(null)
const workerFormRef = ref(null)

onMounted(() => {
  loadUserInfo()
})

const loadUserInfo = async () => {
  loading.value = true
  try {
    if (userType.value === 'company') {
      const response = await getCompanyInfo()
      companyInfo.value = response.data
    } else if (userType.value === 'worker') {
      const response = await getWorkerInfo()
      workerInfo.value = response.data
    }
  } catch (error) {
    console.error('加载用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
  } finally {
    loading.value = false
  }
}

const editCompanyInfo = async () => {
  if (isEditingCompany.value) {
    // 保存企业信息
    try {
      await updateCompanyInfo(companyInfo.value)
      ElMessage.success('企业信息更新成功')
      isEditingCompany.value = false
    } catch (error) {
      console.error('更新企业信息失败:', error)
      ElMessage.error('更新企业信息失败')
    }
  } else {
    // 进入编辑模式
    isEditingCompany.value = true
  }
}

const editWorkerInfo = async () => {
  if (isEditingWorker.value) {
    // 保存零工信息
    try {
      await updateWorkerInfo(workerInfo.value)
      ElMessage.success('个人信息更新成功')
      isEditingWorker.value = false
    } catch (error) {
      console.error('更新个人信息失败:', error)
      ElMessage.error('更新个人信息失败')
    }
  } else {
    // 进入编辑模式
    isEditingWorker.value = true
  }
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
}

.info-card, .account-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.loading-container {
  padding: 20px 0;
}

.account-info, .company-info, .worker-info {
  padding: 10px 0;
}

.account-info p {
  line-height: 2;
  margin: 0;
}
</style> 